前回、前々回の講座では、JavaScriptを利用して棒グラフを描く方法を解説しました。しかし、この方法はJavaScriptをOFFにしているブラウザに対応できません。そこで、今回はスタイルシートだけで棒グラフを作成する方法を解説します。このような場合は、borderのスタイルシートを利用し、“線の太さ”で棒グラフを実現すると効率よくグラフを描画できます。
今回もTABLEを利用してグラフを作成しますが、グラフ全体の枠線をちょっとだけ工夫してみたいと思います。その工夫とは、borderではなく、TABLEの入れ子で枠線を引くテクニックです。まずは、外側のTABLEの背景色を黒（bgcolor=#000000）、セルとセルの間隔を1ピクセル（cellspacing=1）に指定します。また、TABLE内にセルを1つだけ作成します。続いて、そのセル内にグラフを作成するためのTABLEを挿入します。すると、1ピクセルの黒い枠線を描画できます。
<TABLE border=0 bgcolor=#000000 cellspacing=1>
<TR><TD>
<TABLE>
：
（この表内にグラフを作成する）
：
</TABLE>
</TD></TR>
</TABLE>
次に、内側に挿入したTABLEの設定を行います。今回は、薄い黄色をグラフの背景色とするため、bgcolor=#FFFFCCを指定しました。また、cellspacing=10を指定し、グラフの棒と棒の間隔を10ピクセルに指定しています。
<TABLE border=0 bgcolor=#000000 cellspacing=1>
<TR><TD>
<TABLE border=0 bgcolor=#FFFFCC cellspacing=10>
：
（この表内にグラフを作成する）
：
</TABLE>
</TD></TR>
</TABLE>
あとは、TABLE内に棒を描画するだけでグラフが完成します。まずは、左側のセルにグラフの見出しを右揃えで記述します。続いて、その右側のセルに棒を表示しますが、これはセルの左側の枠線をスタイルシートで指定することにより実現します。左側の枠線はborder-leftで指定でき、順に「線の形状」「線幅」「線の色」を指定します。ここでは、1単位を10ピクセルとしたため、線幅はグラフの値の10倍のピクセル数になります。同様の作業を項目の数だけ繰り返すと、棒グラフを完成できます。なお、ウィンドウサイズにより文字が折り返されないように、全てのTDタグにnowrap属性を追加しておくのを忘れないようにしてください。
<TABLE border=0 bgcolor=#000000 cellspacing=1>
<TR><TD>
<TABLE border=0 bgcolor=#FFFFCC cellspacing=10>
<TR>
<TD align=right nowrap>大変よい</TD>
<TD nowrap style="border-left:solid 200px #FF0000"> 20</TD>
</TR>
：
（棒グラフの数だけTR、TDタグを繰り返す）
：
</TABLE>
</TD></TR>
</TABLE>
